<template>
    <div class="wh-100" style="background-color: #fff">
        <!--头部-->
        <div class="w-100 fs-16 fw-7 px-20" style="height: 40px; border-bottom: 1px solid #e8edf4; line-height: 40px; color: #2d2d2d">
            {{ text }}
        </div>
        <!--内容-->
        <div class="w-100 py-20 overflow-auto" style="height: calc(100% - 40px)">
            <Form ref="issueRef" :model="issueForm" :rules="issueRules" :label-width="150" style="">
                <FormItem style="width: 600px" label="活动名称" prop="activityName" key="0">
                    <Input v-model="issueForm.activityName" placeholder="请输入活动名称"></Input>
                </FormItem>
                <FormItem label="活动类型" prop="attendMethod" key="1">
                    <RadioGroup v-model="issueForm.attendMethod">
                        <Radio label="现场活动">
                            <span>现场活动</span>
                        </Radio>
                        <Radio label="线上活动">
                            <span>线上活动</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="活动封面" prop="activityCover" :rules="[{ required: true, trigger: 'blur', validator: materialUpload }]" key="2">
                    <span style="color: #999999">图片说明：图片建议比例16：9，大小不超过10mb，支持jpg、png、gif格式和模板选择。</span>
                    <uploadPicture @beforeUpload="beforeUploadM" :max-count="1" :images="''" ref="asd"></uploadPicture>
                    <div class="d-flex mt-8">
                        <div v-for="item in templatePictureList" class="image-container mr-8 " @click="clickOnTemplatePicture(item, templatePictureList)">
                            <img :src="item.templateImage" class="base-image cursor-pointer" />
                            <img v-if="item.isSelect" :src="selectedImage" class="overlay-image cursor-pointer" />
                            <img v-else :src="unselectedImage" class="overlay-image cursor-pointer" />
                        </div>
                    </div>
                </FormItem>
                <FormItem style="width: 600px" label="所在城市" v-if="showType" required key="3">
                    <div class="d-flex">
                        <FormItem prop="locationProvince">
                            <Select style="width: 200px" v-model="issueForm.locationProvince" filterable no-data-text="暂无数据">
                                <Option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.name" no-data-text="暂无数据"></Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="locationCity">
                            <Select style="width: 200px" class="ml-8" v-model="issueForm.locationCity" filterable no-data-text="暂无数据">
                                <Option filterable="true" v-for="item in cityList" :key="item.id" :label="item.name" :value="item.name"></Option>
                            </Select>
                        </FormItem>
                    </div>
                </FormItem>
                <FormItem style="width: 600px" label="举办地点" prop="fullAddress" v-if="showType" key="4">
                    <Input v-model="issueForm.fullAddress" placeholder="请输入详细地址"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="主办单位" prop="activityOrganizer" :rules="[{ required: true, message: '主办单位不能为空', trigger: 'blur' }]" key="5">
                    <Input v-model="issueForm.activityOrganizer" placeholder="请输入内容"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="承办单位" key="6">
                    <Input v-model="issueForm.activityUndertaker" placeholder="请输入内容"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="协办单位" key="7">
                    <Input v-model="issueForm.assistedOrganizer" placeholder="请输入内容"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="学生参与办法" key="8">
                    <Input v-model="issueForm.remarks" type="textarea" :rows="4" placeholder="请输入内容"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="预计用人单位数量" prop="anticipateNumber" key="9">
                    <Input v-model="issueForm.anticipateNumber" :rows="4" placeholder="请预计用人单位数量"></Input>
                </FormItem>

                <FormItem label="活动报名时间" key="17" prop="applicationTime">
                    <!--                        <DatePicker style="width: 400px" separator=" 至 " type="datetimerange" v-model="applicationTime" @on-change="dateChangeB" ref="dateRefB" format="yyyy-MM-dd HH:mm" placeholder="选择时间"></DatePicker>-->
                    <DatePicker type="datetime" placeholder="活动报名开始时间" @on-change="dateChangeA" format="yyyy-MM-dd HH:mm:ss" v-model="applicationTime[0]" style=""></DatePicker>
                    <span>&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</span>
                    <DatePicker type="datetime" placeholder="活动报名结束时间" @on-change="dateChangeB" format="yyyy-MM-dd HH:mm:ss" v-model="applicationTime[1]" style=""></DatePicker>
                </FormItem>
                <FormItem label="活动举办时间" key="16" prop="activityTime">
                    <DatePicker type="datetime" placeholder="活动举办开始时间" @on-change="dateChangeC" format="yyyy-MM-dd HH:mm:ss" v-model="activityTime[0]" style=""></DatePicker>
                    <span>&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</span>
                    <DatePicker type="datetime" placeholder="活动举办结束时间" @on-change="dateChangeD" format="yyyy-MM-dd HH:mm:ss" v-model="activityTime[1]" style=""></DatePicker>
                </FormItem>

                <FormItem style="width: 600px" label="选择场地" prop="venue" v-if="showType" key="10">
                    <Select v-model="issueForm.venue" filterable no-data-text="暂无数据">
                        <Option v-for="item in placeSelections" :key="item.id" :label="item.venueName" :value="item.id"></Option>
                    </Select>
                </FormItem>
                <FormItem style="width: 1000px" label="招聘会说明" prop="illustrate" key="11">
                    <quill-editor ref="myQuillEditor" v-model="issueForm.illustrate" :options="editorOption" class="my-quill-editor heig_max"></quill-editor>
                </FormItem>
                <FormItem style="width: 600px" label="联系人" prop="contactPerson" key="12">
                    <Input v-model="issueForm.contactPerson" placeholder="请输入联系人姓名"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="联系方式" prop="contactPhone" key="13">
                    <Input v-model="issueForm.contactPhone" placeholder="请输入联系方式"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="电子邮箱" prop="email" key="14">
                    <Input v-model="issueForm.email" placeholder="请输入电子邮箱"></Input>
                </FormItem>
                <FormItem label="是否对外共享" prop="isShare" key="15">
                    <RadioGroup v-model="issueForm.isShare">
                        <Radio :label="true">是</Radio>
                        <Radio :label="false">否</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="" v-if="type === 1">
                    <el-button @click="save">保存</el-button>
                    <el-button type="primary" @click="publish">保存并发布</el-button>
                    <el-button @click="openMask">预览</el-button>
                </FormItem>
                <FormItem label="" v-if="type === 2">
                    <Button @click="modification" type="primary">修改</Button>
                </FormItem>
            </Form>
        </div>
        <!--    <el-dialog title="双选会预览" :visible.sync="dialogTableVisible">-->
        <!--      <el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">-->
        <!--        <template slot="extra">-->
        <!--          <el-button type="primary" size="small">操作</el-button>-->
        <!--        </template>-->
        <!--        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>-->
        <!--        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>-->
        <!--        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>-->
        <!--        <el-descriptions-item label="备注">-->
        <!--          <el-tag size="small">学校</el-tag>-->
        <!--        </el-descriptions-item>-->
        <!--        <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>-->
        <!--      </el-descriptions>-->
        <!--    </el-dialog>-->
        <div class="mask d-flex-align-center" v-if="showMarsk">
            <div class="bg-color-white m-auto br_4p pb-20 pl-20 pr-20 pt-8">
                <div class="text-right">
                    <h2><i class="el-icon-circle-close fs-34" @click="closeMask"></i></h2>
                </div>
                <doubleSelectionMeetingInfo
                    :activityCover="issueForm.activityCover"
                    :activityOrganizer="issueForm.activityOrganizer"
                    :contactPerson="issueForm.contactPerson"
                    :contactPhone="issueForm.contactPhone"
                    :activactivityStartTimeityCover="activityTime[0]"
                    :activityEndTime="activityTime[1]"
                    :applicationStartTime="applicationTime[0]"
                    :applicationEndTime="applicationTime[1]"
                    :activityName="issueForm.activityName"
                    :attendMethod="issueForm.attendMethod"
                    :doubleSelectionMeetingDetails="issueForm.illustrate"
                    :fullAddress="issueForm.fullAddress"
                    :email="issueForm.email"
                ></doubleSelectionMeetingInfo>
            </div>
        </div>
    </div>
</template>
<script>
import uploadPicture from '@/components/uploadPicture/uploadPicture16.vue';
import doubleSelectionMeetingInfo from '@/components/viewDoubleSelectionMeetingInfo.vue';
import { publishAPI, saveForReviewAPI, getAllPlaceAPI, modifyTheDualMeetingAPI } from '../../../api/bys/recruitmentManagement/index';
import { getProvinceAPI, getCityAPI, imageUploadDataApi } from '../../../api/bys/index';
import moment from 'moment';
import { de } from 'date-fns/locale';
import { updateVal } from '@/util/ObjectUtil';

// templateImage :页面展示图片
// templateImageURL 下载的路径，为public目录下的images

// region TODO 双选会表单
const issueForm = {
    activityName: '', //活动名称
    activityCover: '1', //活动封面
    locationCity: '', //举办城市  市
    locationProvince: '', //举办城市 省份
    fullAddress: '', //举办地点 详细地址
    activityOrganizer: '', //主办单位
    activityUndertaker: '', //承办单位
    assistedOrganizer: '', //协办单位
    attendMethod: '现场活动', //活动类型
    remarks: '', //学生参与方法
    anticipateNumber: '', //预计用人单位规模
    activityStartTime: '', //活动开始时间
    activityEndTime: '', //活动结束时间
    applicationStartTime: '', //活动报名开始时间
    applicationEndTime: '', //活动报名结束时间
    venue: '', //举办场地
    illustrate: '', //招聘会说明
    contactPerson: '', //联系人
    contactPhone: '', //联系方式
    email: '', //活动邮箱
    isShare: false //是否对外共享
};
//
// region TODO 富文本编译器
const editorOption = {
    // 占位配置
    placeholder: '请输入...',
    height: '300px',
    modules: {
        // 配置工具栏
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            ['image', 'link'], // 链接、图片、视频
            [{ align: [] }], // 添加居中按钮
            [{ color: [] }] // 文字颜色按钮
        ]
        // // 更改插入的图片大小
        // imageResize: {
        //     displayStyles: {
        //         backgroundColor: "black",
        //         border: "none",
        //         color: "white",
        //     },
        //     modules: ["Resize", "DisplaySize", "Toolbar"],
        // }
    }
};
// endregion
// endregion
export default {
    components: { uploadPicture, doubleSelectionMeetingInfo },
    data() {
        var validateActivityTime = (rule, value, callback) => {
            if (this.activityTime[0] && this.activityTime[1]) {
                if (this.activityTime[1] <= this.activityTime[0]) {
                    callback(new Error('活动举办结束时间必须在活动举办开始时间之后'));
                } else {
                    // 检查有无报名时间
                    if (this.applicationTime[0] && this.applicationTime[1]) {
                        if (this.applicationTime[1] >= this.activityTime[0]) {
                            callback(new Error('活动报名截止时间须在活动举办开始时间之前'));
                        } else {
                            callback();
                        }
                    } else {
                        // 无报名时间
                        callback();
                    }
                }
            } else {
                callback(new Error('请填写完整的活动举办时间'));
            }
        };
        var validateApplicationTime = (rule, value, callback) => {
            if (this.applicationTime[0] && this.applicationTime[1]) {
                if(!this.isUpdate){
                    let data =new Date();
                    let dataTimeNow = moment(data).format('YYYY-MM-DD HH:mm:ss');
                    let dataTimebegin = moment(this.applicationTime[0]).format('YYYY-MM-DD HH:mm:ss');
                    console.log("活动开始时间",dataTimebegin)
                    console.log("当前时间",dataTimeNow)
                    if(dataTimebegin >= dataTimeNow){
                        if (this.applicationTime[1] <= this.applicationTime[0]) {
                            callback(new Error('活动报名截止时间必须在活动报名开始时间之后'));
                        } else {
                            // 检查有无举办时间
                            if (this.activityTime[0] && this.activityTime[1]) {
                                if (this.applicationTime[1] >= this.activityTime[0]) {
                                    callback(new Error('活动报名截止时间须在活动举办开始时间之前'));
                                } else {
                                    callback();
                                }
                            } else {

                            }
                        }
                    }else{
                        callback(new Error('报名开始时间不能早于当前时间'));
                    }
                }else{
                    // 无举办时间
                    callback();
                }
            } else {
                callback(new Error('请填写完整的活动报名时间'));
            }
        };
        var chackVenue = (rule, value, callback) => {
            console.log(value);
            debugger;
            if (this.issueForm.venue) {
                callback();
            } else {
                callback(new Error('举办场地不能为空'));
            }
        };
        return {
            // 模板图片
            templatePictureList: [
                { id: 0, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板0.png'), templateImageURL: 'images/模板0.png', isSelect: false },
                { id: 1, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板1.png'), templateImageURL: 'images/模板1.png', isSelect: false },
                { id: 2, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板2.png'), templateImageURL: 'images/模板2.png', isSelect: false },
                { id: 3, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板3.png'), templateImageURL: 'images/模板3.png', isSelect: false },
                { id: 4, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板4.png'), templateImageURL: 'images/模板4.png', isSelect: false }
            ],
            selectFormData: new FormData(),
            isSelectedImage: false,
            selectedImage: require('@/views/recruitmentManagement/mutualSelection/images/选中.png'),
            unselectedImage: require('@/views/recruitmentManagement/mutualSelection/images/未选中.png'),
            materialUpload: (rule, value, callback) => {
                if ((this.$refs.asd.imgList.length <= 0 || this.issueForm.activityCover == null) && !this.isSelectedImage) {
                    callback(new Error('请上传活动封面'));
                } else {
                    callback();
                }
            },
            issueRules: {
                locationProvince: [{ required: true, message: '请选择省级', trigger: 'change' }],
                locationCity: [{ required: true, message: '请选择市级', trigger: 'change' }],
                activityName: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
                attendMethod: [{ required: true, message: '活动类型不能为空', trigger: 'blur' }],
                // activityCover: [{ required: true, message: '请上传活动封面', trigger: 'blur' },],
                fullAddress: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
                anticipateNumber: [{ required: true, message: '用人单位规模不能为空', trigger: 'blur' }],
                venue: [{ required: true, validator: chackVenue, trigger: 'change' }],
                contactPerson: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
                contactPhone: [
                    { required: true, message: '联系电话不能为空', trigger: 'blur' },
                    {
                        pattern: /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/,
                        message: '联系电话格式不正确',
                        trigger: 'blur'
                    }
                ],
                time: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
                activityTime: [{ required: true, validator: validateActivityTime, trigger: 'blur' }],
                applicationTime: [{ required: true, validator: validateApplicationTime, trigger: 'blur' }]
            },
            activityTime: ['', ''],
            applicationTime: ['', ''],
            text: '',
            isShow: true,
            type: 1,
            showType: '',
            dialogTableVisible: true,
            issueForm,
            editorOption,
            provinceList: [],
            cityList: [],
            placeSelections: [],
            showMarsk: false,
            isUpdate:false,
        };
    },

    computed: {
        getAttendMethod: function() {
            return this.issueForm.attendMethod;
        }
    },
    watch: {
        getAttendMethod: {
            handler() {
                if (this.issueForm.attendMethod === '线上活动') {
                    this.isShow = false;
                    console.log(this.isShow);
                } else {
                    this.isShow = true;
                    console.log(this.isShow);
                }
            }
        },
        // 监听城市数据的变化，跟着省级数据的转变改变市级数据
        'issueForm.locationProvince'() {
            if(this.text !== '编辑双选会'){
                this.issueForm.locationCity = '';
            }
            this.getCity();
        },
        'issueForm.attendMethod': function(newVal) {
            immediate: true;
            if (newVal === '现场活动') {
                this.showType = true;
            }
            if (newVal === '线上活动') {
                this.showType = false;
            }
        }
    },
    created() {
        console.log('created');
    },
    async mounted() {
        const reponse= await getProvinceAPI()
        this.getAllPlace();
        if(reponse.code == 200){
            this.provinceList = reponse.result;

            // 添加活动报名默认时间
            // 创建一个表示明天的Date对象
            let tomorrow = new Date();
            // tomorrow.setDate(tomorrow.getDate() + 1);
            tomorrow.setMinutes(tomorrow.getMinutes() + 30);
            // 将日期对象转换为字符串
            this.applicationTime[0] = tomorrow;
            this.issueForm.applicationStartTime = moment(this.applicationTime[0]).format('YYYY-MM-DD HH:mm:ss');
            // let tomorrow1 = new Date();
            // tomorrow1.setDate(tomorrow1.getDate() + 2);
            // tomorrow1.setHours(23, 59, 59, 59);
            // this.applicationTime[1] = tomorrow1;
            // this.issueForm.applicationEndTime = moment(this.applicationTime[1]).format('YYYY-MM-DD HH:mm:ss');
            //
            console.log(this.showType, '0');
            this.$refs.asd.imgList.length = 0;
            if (this.$route.query.routeParams) {
                this.issueForm = JSON.parse(this.$route.query.routeParams);
                if (this.issueForm.attendMethod === '线上活动') {
                    this.$nextTick(() => {
                        this.showType = false;
                    });
                } else {
                    this.$nextTick(() => {
                        this.showType = true;
                    });
                }
                this.type = 2;
                console.log(this.issueForm, '111');
                this.text = '编辑双选会';
                this.isUpdate=true
                this.activityTime = [this.issueForm.activityStartTime, this.issueForm.activityEndTime];
                this.applicationTime = [this.issueForm.applicationStartTime, this.issueForm.applicationEndTime];
                this.$refs.asd.imgList.push(this.issueForm.activityCover);
            } else {
                this.type = 1;
                this.text = '发布双选会';
                this.isUpdate=false
                this.$refs.asd.imgList.length = 0;
                if (this.issueForm.attendMethod === '线上活动') {
                    this.$nextTick(() => {
                        this.showType = false;
                    });
                } else {
                    this.$nextTick(() => {
                        this.showType = true;
                    });
                }
            }
        }


    },

    methods: {
        beforeUploadM(){
            this.$refs.issueRef.validateField('activityCover')
            this.issueForm.activityCover=this.$refs.asd.imgList[0]
        },
        clickOnTemplatePicture(item, allItem) {
            for (let i = 0; i < allItem.length; i++) {
                if (item.id === allItem[i].id) {
                    allItem[i].isSelect = !allItem[i].isSelect;
                    this.isSelectedImage = allItem[i].isSelect === true;
                    // 将图片路径转换为Blob对象
                    const name = '模板' + i + '.png';
                    fetch(item.templateImageURL)
                        .then(response => response.blob())
                        .then(blob => {
                            // 创建FormData对象
                            // 将Blob对象添加到FormData对象中
                            this.selectFormData.append('file', blob, name);

                        });
                    this.issueForm.activityCover=item.templateImageURL
                    this.$refs.issueRef.validateField('activityCover');
                } else {
                    allItem[i].isSelect = false;
                }
            }
        },

        dateChangeA() {
            this.issueForm.applicationStartTime = moment(this.applicationTime[0]).format('YYYY-MM-DD HH:mm:ss');
            // this.$refs.issueRef.validate();
        },
        dateChangeB() {
            this.issueForm.applicationEndTime = moment(this.applicationTime[1]).format('YYYY-MM-DD HH:mm:ss');
            // this.$refs.issueRef.validate();
        },
        dateChangeC() {
            this.issueForm.activityStartTime = moment(this.activityTime[0]).format('YYYY-MM-DD HH:mm:ss');
            // this.$refs.issueRef.validate();
        },
        changeDateC() {
            // let selectedDate = new Date(this.activityTime[0]);
            // selectedDate.setHours(8, 0, 0);
            // this.activityTime[0] = selectedDate;
            this.issueForm.activityStartTime = moment(this.activityTime[0]).format('YYYY-MM-DD HH:mm:ss');
        },
        dateChangeD() {
            this.issueForm.activityEndTime = moment(this.activityTime[1]).format('YYYY-MM-DD HH:mm:ss');
            // this.$refs.issueRef.validate();
        },
        changeDateB() {
            // let selectedDate = new Date(this.activityTime[1]);
            // selectedDate.setHours(23, 59, 59);
            // this.activityTime[1] = selectedDate;
            this.issueForm.activityEndTime = moment(this.activityTime[1]).format('YYYY-MM-DD HH:mm:ss');
        },
        //修改双选会
        modification() {
            this.$refs.issueRef.validate(async valid => {
                if (valid) {
                    // 校验文件大小
                    if (this.$refs.asd.formFile.length > 0) {
                        console.log(this.$refs.asd.formFile[0].size, '文件大小');
                        if (this.$refs.asd.formFile[0].size > 1024 * 1024 * 10) {
                            this.$message.error('图片大小不能超过10M');
                            return false;
                        }
                    }

                    if (this.issueForm.activityStartTime && this.issueForm.activityEndTime && this.issueForm.applicationStartTime && this.issueForm.applicationEndTime) {
                        if (this.issueForm.applicationEndTime >= this.issueForm.activityStartTime) {
                            this.$message.error('活动报名截止时间须在活动举办开始时间之前');
                        } else {
                            if (this.$refs.asd.formFile.length > 0) {
                                //上传证明材料
                                const formData = new FormData();
                                formData.append('file', this.$refs.asd.formFile[0]);
                                const uploadResponse = await imageUploadDataApi(formData);
                                if (uploadResponse.code == 200) {
                                    console.log('文件地址', uploadResponse);
                                    this.issueForm.activityCover = uploadResponse.result;
                                }
                            }

                            if (this.isSelectedImage && this.$refs.asd.formFile.length <= 0) {
                                const uploadResponse = await imageUploadDataApi(this.selectFormData);
                                if (uploadResponse.code == 200) {
                                    console.log('文件地址', uploadResponse);
                                    this.issueForm.activityCover = uploadResponse.result;
                                }
                            }
                            const uploadResponse2 = await modifyTheDualMeetingAPI(this.issueForm);
                            if (uploadResponse2.code == 200) {
                                if (uploadResponse2.success) {
                                    this.$message.success('修改成功');
                                    await this.$router.back();
                                }
                            }
                        }
                    } else {
                        this.$message.error('活动举办时间、报名时间不能为空');
                    }
                } else {
                    this.$message.error('请完善相关信息！');
                    return false;
                }
            });
            // modifyTheDualMeetingAPI(this.issueForm).then(res => {
            //   if (res.success){
            //     this.$message.success(res.message)
            //   }
            // })
        },
        // region TODO 省市数据
        getProvince() {
            getProvinceAPI().then(res => {
                console.log(res, '省级');
                this.provinceList = res.result;
            });
        },
        getCity() {
            let newData = this.provinceList.filter(item => item.name === this.issueForm.locationProvince); //返回对象
            console.log(this.provinceList)
            console.log(this.issueForm.locationProvince)
            console.log(newData);
            getCityAPI({
                provinceId: newData[0].id
            }).then(res => {
                console.log(res, '市级');
                this.cityList = res.result;
            });
        },
        // endregion
        // region TODO 查询场地
        getAllPlace() {
            getAllPlaceAPI().then(res => {
                if (res.success) {
                    console.log(res, '场地列表');
                    this.placeSelections = res?.result || [];
                } else {
                    this.placeSelections = '暂无数据';
                }
            });
        },
        // endregion
        save() {
            this.$refs.issueRef.validate(async valid => {
                if (valid) {
                    // 校验文件大小
                    if (this.$refs.asd.formFile.length > 0) {
                        console.log(this.$refs.asd.formFile[0].size, '文件大小');
                        if (this.$refs.asd.formFile[0].size > 1024 * 1024 * 10) {
                            this.$message.error('图片大小不能超过10M');
                            return false;
                        }
                    }

                    if (this.issueForm.activityStartTime && this.issueForm.activityEndTime && this.issueForm.applicationStartTime && this.issueForm.applicationEndTime) {
                        if (this.issueForm.applicationEndTime >= this.issueForm.activityStartTime) {
                            this.$message.error('活动报名截止时间须在活动举办开始时间之前');
                        } else {
                            //上传证明材料
                            const formData = new FormData();
                            let uploadResponse = null;

                            if (this.$refs.asd.formFile.length > 0) {
                                formData.append('file', this.$refs.asd.formFile[0]);
                                uploadResponse = await imageUploadDataApi(formData);
                                this.$Message.info(uploadResponse.message);
                            }
                            if (this.isSelectedImage && this.$refs.asd.formFile.length <= 0) {
                                uploadResponse = await imageUploadDataApi(this.selectFormData);
                                this.$Message.info(uploadResponse.message);
                            }
                            if (uploadResponse.code == 200) {
                                console.log('文件地址', uploadResponse);
                                this.issueForm.activityCover = uploadResponse.result;
                                const uploadResponse2 = await saveForReviewAPI(this.issueForm);
                                if (uploadResponse2.code == 200) {
                                    if (uploadResponse2.success) {
                                        const formData={
                                            activityName: '', //活动名称
                                            activityCover: '1', //活动封面
                                            locationCity: '', //举办城市  市
                                            locationProvince: '', //举办城市 省份
                                            fullAddress: '', //举办地点 详细地址
                                            activityOrganizer: '', //主办单位
                                            activityUndertaker: '', //承办单位
                                            assistedOrganizer: '', //协办单位
                                            attendMethod: '现场活动', //活动类型
                                            remarks: '', //学生参与方法
                                            anticipateNumber: '', //预计用人单位规模
                                            activityStartTime: '', //活动开始时间
                                            activityEndTime: '', //活动结束时间
                                            applicationStartTime: '', //活动报名开始时间
                                            applicationEndTime: '', //活动报名结束时间
                                            venue: '', //举办场地
                                            illustrate: '', //招聘会说明
                                            contactPerson: '', //联系人
                                            contactPhone: '', //联系方式
                                            email: '', //活动邮箱
                                            isShare: false //是否对外共享
                                        }
                                        updateVal(this.issueForm,formData)
                                        this.$message.success('保存成功');
                                        await this.$router.back();
                                    }
                                }
                            }
                        }
                    } else {
                        this.$message.error('活动举办时间、报名时间不能为空');
                    }
                } else {
                    this.$message.error('请完善相关信息！');
                    return false;
                }
            });
        },
        publish() {
            this.$refs.issueRef.validate(async valid => {
                if (valid) {
                    if (this.$refs.asd.formFile.length > 0) {
                        console.log(this.$refs.asd.formFile[0].size, '文件大小');
                        if (this.$refs.asd.formFile[0].size > 1024 * 1024 * 10) {
                            this.$message.error('图片大小不能超过10M');
                            return false;
                        }
                    }
                    if (this.issueForm.activityStartTime && this.issueForm.activityEndTime && this.issueForm.applicationStartTime && this.issueForm.applicationEndTime) {
                        if (this.issueForm.applicationEndTime >= this.issueForm.activityStartTime) {
                            this.$message.error('活动报名截止时间须在活动举办开始时间之前');
                        } else {
                            // this.issueForm.activityCover = '1'
                            // const uploadResponse2 = await publishAPI(this.issueForm)
                            // if (uploadResponse2.code == 200){
                            //   if (uploadResponse2.success){
                            //     this.$message.success('保存并发布成功')
                            //     await this.$router.back()
                            //   }
                            // }
                            const formData = new FormData();
                            let uploadResponse = null;

                            if (this.$refs.asd.formFile.length > 0) {
                                console.log("file",this.$refs.asd.formFile[0])
                                formData.append('file', this.$refs.asd.formFile[0]);
                                uploadResponse = await imageUploadDataApi(formData);
                                this.$Message.info(uploadResponse.message);
                            }
                            if (this.isSelectedImage && this.$refs.asd.formFile.length <= 0) {
                                uploadResponse = await imageUploadDataApi(this.selectFormData);
                                this.$Message.info(uploadResponse.message);
                            }

                            if (uploadResponse?.code == 200) {
                                console.log('文件地址', uploadResponse);
                                this.issueForm.activityCover = uploadResponse.result;
                                const uploadResponse2 = await publishAPI(this.issueForm);
                                if (uploadResponse2.code == 200) {
                                    if (uploadResponse2.success) {
                                        this.$message.success('保存并发布成功');
                                        const formData={
                                            activityName: '', //活动名称
                                            activityCover: '1', //活动封面
                                            locationCity: '', //举办城市  市
                                            locationProvince: '', //举办城市 省份
                                            fullAddress: '', //举办地点 详细地址
                                            activityOrganizer: '', //主办单位
                                            activityUndertaker: '', //承办单位
                                            assistedOrganizer: '', //协办单位
                                            attendMethod: '现场活动', //活动类型
                                            remarks: '', //学生参与方法
                                            anticipateNumber: '', //预计用人单位规模
                                            activityStartTime: '', //活动开始时间
                                            activityEndTime: '', //活动结束时间
                                            applicationStartTime: '', //活动报名开始时间
                                            applicationEndTime: '', //活动报名结束时间
                                            venue: '', //举办场地
                                            illustrate: '', //招聘会说明
                                            contactPerson: '', //联系人
                                            contactPhone: '', //联系方式
                                            email: '', //活动邮箱
                                            isShare: false //是否对外共享
                                        }
                                        updateVal(this.issueForm,formData)
                                        await this.$router.back();
                                    }
                                }
                            }

                            // this.$confirm('是否确定保存并发布?', '提示', {
                            //   confirmButtonText: '确定',
                            //   cancelButtonText: '取消',
                            //   type: 'warning'
                            // }).then(() => {
                            //   publishAPI(this.issueForm).then((res) => {
                            //     if (res.success) {
                            //       this.$message({
                            //         type: 'success',
                            //         message: '保存并发布成功'
                            //       });
                            //       this.$router.back()
                            //     } else {
                            //       this.$message({
                            //         type: 'error',
                            //         message: '保存失败，请联系管理员'
                            //       });
                            //     }
                            //   })
                            // }).catch(() => {
                            //   this.$message({
                            //     type: 'info',
                            //     message: '已取消操作'
                            //   });
                            // });
                        }
                    } else {
                        this.$message.error('活动举办时间、报名时间不能为空');
                    }
                } else {
                    this.$message.error('请完善相关信息！');
                    return false;
                }
            });
        },
        openMask() {
            console.log(this.$refs.asd.formFile[0]);
            this.showMarsk = true;
        },
        closeMask() {
            this.showMarsk = false;
        }
    }
};
</script>
<style scoped lang="less">
/* 编辑器高度及背景色 */
::v-deep .ql-editor {
    min-height: 300px;
    background-color: #fff;
}
::v-deep .ql-snow .ql-tooltip[data-mode='link']::before {
    content: '进入链接';
}
::v-deep .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: '保存';
}
.heig_max {
    max-height: 600px;
}
::v-deep .ql-editor {
    max-height: 500px;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
::v-deep .el-icon-circle-close {
    color: rgba(0, 0, 0, 1) !important;
}

.image-container {
    position: relative;
    display: inline-block; /* 或者其他适合你布局的display类型 */
}

.base-image {
    /* 设置基础图片的样式，如宽度、高度等 */
}

.overlay-image {
    position: absolute;
    top: 4px;
    right: 4px;
    /* 设置覆盖图片的样式，如宽度、高度等 */
}
</style>
